<!-- 放歌详情页面 -->
<template>
  <div
    class="sing"
    v-show="this.$store.state.singShow"
    v-if="showSing.itemData"
  >
    <!-- 背景毛玻璃 -->
    <div class="background">
      <div class="filter"></div>
      <img
        :src="showSing.itemData.uiElement.image.imageUrl"
        width="100%"
        height="100%"
      />
    </div>
    <div class="box">
      <!-- title -->
      <div class="sing_top">
        <div class="back" @click="back">
          <span class="iconfont icon-navbankicon"></span>
        </div>
        <div class="sing_text" v-if="showSing.itemData.uiElement">
          <p>{{ showSing.itemData.uiElement.mainTitle.title }}</p>
          <p>{{ showSing.itemData.resourceExtInfo.artists[0].name }} ></p>
        </div>
      </div>

      <!-- 唱盘 -->
      <div class="disc">
        <div class="turntable rotateAnimation" ref="turntable">
          <img
            class="bg_img"
            :src="showSing.itemData.uiElement.image.imageUrl"
          />
        </div>
        <div class="stylus" ref="stylus">
          <img src="../components/img/stylus.png" alt="" />
        </div>
      </div>

      <!-- 下方操作 -->
      <div class="operation">
        <div class="iconList">
          <div>
            <span class="iconfont icon-xiai"></span>
          </div>
          <div>
            <span class="iconfont icon-xiazai"></span>
          </div>
          <div>
            <span class="iconfont icon-xinxi"></span>
          </div>
          <div>
            <span class="iconfont icon-2"></span>
          </div>
        </div>
        <div class="schedule">
          <span>{{
            formatSecond(this.$store.state.audioControl.alreadyPlay)
          }}</span>
          <div class="hr">
            <div class="duration" @click="clickProgress($event)" ref="progress">
              <div
                class="playing"
                :style="{ width: indicatorPosition + '%' }"
              ></div>
              <div
                class="playBtn_box"
                :style="{ left: indicatorPosition + '%' }"
              >
                <div class="playBtn"></div>
              </div>
            </div>
          </div>
          <span>{{
            formatSeconds(this.$store.state.audioControl.musicDt)
          }}</span>
        </div>
        <div class="operating">
          <div>
            <span class="iconfont icon-suiji"></span>
          </div>
          <div>
            <span class="iconfont icon-shangyishou1"></span>
          </div>
          <div @click="play">
            <span
              :class="
                this.$store.state.audioControl.isPlaying
                  ? 'iconfont icon-zanting1'
                  : 'iconfont icon-shipin'
              "
            ></span>
          </div>
          <div @click="next()">
            <span class="iconfont icon-shangyishou"></span>
          </div>
          <div>
            <span class="iconfont icon-bofangliebiao"></span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  props: {
    showSing: {
      default: false,
    },
  },
  data() {
    //这里存放数据
    return {};
  },
  //监听属性 类似于data概念
  computed: {
    formatSeconds() {
      return function(mss) {
        // console.log(mss)
        var minutes = parseInt((mss % (1000 * 60 * 60)) / (1000 * 60));
        if (minutes < 10) {
          minutes = "0" + minutes;
        }
        var seconds = parseInt((mss % (1000 * 60)) / 1000);
        if (seconds < 10) {
          seconds = "0" + seconds;
        }
        return minutes + ":" + seconds;
      };
    },
    formatSecond() {
      return function(value) {
        let result = parseInt(value);
        let m =
          Math.floor((result / 60) % 60) < 10
            ? "0" + Math.floor((result / 60) % 60)
            : Math.floor((result / 60) % 60);
        let s =
          Math.floor(result % 60) < 10
            ? "0" + Math.floor(result % 60)
            : Math.floor(result % 60);

        let res = "";

        if (m == "00") {
          res += "00:";
        } else {
          res += `${m}:`;
        }
        if (s == "00") {
          s = "0" + s;
        } else {
          res += `${s}`;
        }
        return res;
      };
    },

    indicatorPosition() {
      return (
        (this.$store.state.audioControl.alreadyPlay /
          this.$store.state.audioControl.musicDt) *
        100000
      );
    },
  },
  //监控data中的数据变化
  watch: {
    "$store.state.singShow": {
      deep: true, //深度监听
      handler(newV, oldV) {
        //这个函数必须叫handler,
        //深度监听一个对象的时候,这两个形参对应的都是新值
        console.log(newV, oldV);
        if (oldV == false) {
          let play = this.$store.state.audioControl.isPlaying;
          if (play) {
            this.$nextTick(() => {
              this.$refs.stylus.style.transform = "rotate(0deg)";
              this.$refs.turntable.style.animationPlayState = "running";
            });
          } else {
            this.$nextTick(() => {
              this.$refs.stylus.style.transform = "rotate(-22deg)";
              this.$refs.turntable.style.animationPlayState = "paused";
            });
          }
        }
      },
    },

    
  },
  //方法集合
  methods: {
    clickProgress(event) {
      // 点击进度条时 更新音频时间和进度条
      const e = event || window.event;
      const position = e.clientX - e.currentTarget.offsetLeft; // 当前点击的位置
      const progressWidth = this.$refs.progress.offsetWidth; // 进度条总宽度
      const duration = this.$store.state.audioControl.musicDt;
      const currentTime = parseInt((position / progressWidth) * duration); // 设置当前音频的播放时间
      console.log(currentTime);
      this.$store.commit('alreadyPlay',currentTime)
      // this.updateProgress(
      //   (position / progressWidth) * this.duration,
      //   this.duration
      // );
    },
    //返回
    back() {
      this.$store.commit("alterSingShow", false);
    },

    //播放暂停
    play() {
      let play = this.$store.state.audioControl.isPlaying;
      if (play) {
        this.$store.commit("isPlaying", !play);
        this.$refs.stylus.style.transform = "rotate(-22deg)";
        this.$refs.turntable.style.animationPlayState = "paused";
      } else {
        this.$store.commit("isPlaying", true);
        this.$refs.stylus.style.transform = "rotate(0deg)";
        this.$refs.turntable.style.animationPlayState = "running";
      }
    },

    //下一首
    next(){
      console.log(this.$store.state.misicList)
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
.background {
  position: absolute;
  left: -50%;
  top: -50%;
  width: 300%;
  height: 300%;
  z-index: -1;
  opacity: 0.6;
  filter: blur(30px);
  .filter {
    position: absolute;
    width: 100%;
    height: 100%;
    background: black;
    opacity: 0.6;
  }
}
.sing {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100%;
  z-index: 2;
  background: #554e34;
  .box {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    .sing_top {
      font-size: 20px;
      padding: 13px 17px;
      display: flex;
      justify-content: flex-start;
      .back {
        display: flex;
        justify-content: center;
        align-items: center;
        .icon-navbankicon {
          font-size: 20px;
          color: #fff;
        }
      }

      .sing_text {
        margin-left: 17px;
        p:nth-child(1) {
          font-size: 16px;
          color: #fff;
        }
        p:nth-child(2) {
          font-size: 13px;
          color: #fff;
          color: #7a7a7f;
        }
      }
    }
    .disc {
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      height: 100%;
      .turntable {
        display: flex;
        justify-content: center;
        align-items: center;
        background-image: url("../components/img/turntable.png");
        background-size: cover;
        width: 272px;
        height: 272px;
        margin-top: 55px;
        position: absolute;
        top: 0;
        .bg_img {
          width: 188px;
          height: 188px;
          border-radius: 50%;
        }
      }
      .rotateAnimation {
        animation: identifier 15s linear infinite normal forwards;
        animation-play-state: paused;
        @keyframes identifier {
          100% {
            transform: rotate(360deg);
          }
        }
      }

      .stylus {
        transform-origin: 0 0;
        transform: rotate(0deg);
        transition: all 1s linear;
        position: absolute;
        top: 0;
        left: 50%;
        img {
          width: 82px;
          height: 111px;
        }
      }
    }
    .operation {
      .iconList {
        display: flex;
        justify-content: space-around;
        align-items: center;
        font-size: 25px;
        color: #acadb8;
        span {
          font-size: 20px;
        }
      }
      .schedule {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 21px;
        span {
          color: #b7b6bc;
          font-size: 12px;
        }
        .hr {
          padding: 0 10px;
          .duration {
            width: 245px;
            background: #92929c;
            height: 2px;
            position: relative;
            .playing {
              background: #ffffff;
              height: 2px;
              position: absolute;
              top: 0;
              left: 0;
            }
            .playBtn_box {
              width: 30px;
              height: 30px;
              position: absolute;
              top: -15px;
              left: 0px;
              border: 1px solid red;
              display: flex;
              justify-content: center;
              align-items: center;
              transform: translateX(-50%);
              .playBtn {
                width: 10px;
                height: 9px;
                border-radius: 50%;
                background: #fff;
              }
            }
          }
        }
      }
      .operating {
        display: flex;
        justify-content: space-around;
        align-items: center;
        div {
          span {
            font-size: 20px;
            color: #fff;
          }
        }
        div:nth-child(3) {
          span {
            font-size: 50px;
          }
        }
      }
    }
  }
}
</style>
